<route lang="yaml">
meta:
  layout: home
  title: 我的关注
  savedPosition: true
</route>
<template>
  <div class=" bg-white" v-loading="loading">
    <div class="text-2xl flex justify-start px-8  leading-16! divide_b">
      关注
    </div>

    <!-- 内容版块 -->
    <div v-if="followList.length !== 0" class="follow-list">
      <ul>
        <li :key="item?._id" v-for="item in followList" class="flex sm:justify-between divide_b items-center sm:py-2 md:py-4 sm:px-4 md:py-10">
          <div>
            <RouterLink :to="`/accountCenter/postList/${item?._id}`">
              <img :src="IMG_URL_SERVER +item?.avatar?.url" :alt="item?.avatar?.name" class="avatar wh-16">
            </RouterLink>
          </div>
          <div class="flex-1 sm:ml-2 md:ml-6 user-detail">
            <div class="flex justify-start items-center">
              <RouterLink :to="`/accountCenter/postList/${item?._id}`">
                <div class="hover:text-blue-400">{{item?.nickname}}</div>
              </RouterLink>
              <div class="ml-2">
                <img class="h-4" :src="IMG_URL_SERVER +user?.level?.url" alt="">
              </div>
            </div>
            
            <div class="h3">{{item?.headline}}</div>
          </div>

          <div  class="followingBtn">
            <button @click="following(item?._id,$event)" class="fBtn btn">
              {{user?.following?.some((val:any)=> val === item?._id) ? '已关注': '关注'}}

            </button>

            <el-dialog
            
              v-model="centerDialogVisible"
              title="提示"
              width="30%"
              align-center
            >
              <span>确认要取消关注吗？</span>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="centerDialogVisible = false">取消</el-button>    
                  <el-button type="primary" @click="unFollowing(item?._id,$event)">
                    确认
                  </el-button>
                </span>
              </template>
            </el-dialog>
          </div>
        </li>
      </ul>
      <div class="text-center py-2">没有更多的数据了</div>
    </div>
    <div v-else-if="followList.length === 0">
      <el-empty description="暂时没有数据哟" :image-size="200" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import { fetchFollowingList,fetchAddFollowing,fetchUnFollowing } from "@/server";
import { IMG_URL_SERVER } from "@/config"

//route
const route = useRoute()
//用户关注列表
const followList:any = ref([])
//弹出取消关注对话框
const centerDialogVisible = ref(false)
//登录模态框开关
const utilsStore = useUtilsStore()
//现在登录的用户store
const authStore = useAuthStore()
const { user } = storeToRefs(authStore)
//重载
const { handleReload } = inject<any>("reload")
//等待加载
const loading = ref(true)


//关注别人
const following = (id:any,e:any)=>{
  //保护条款
  if (!authStore.isAuthenticated) {
    utilsStore.dialogTableVisible = true
    return false;
  }
  if(e.target.textContent === '关注'){
    fetchAddFollowing(id).then(()=>{
      e.target.textContent  = '已关注'
      handleReload(500)
    })
  }else{
    centerDialogVisible.value = true
  }
}
//取消关注
const unFollowing = (id:any,e:any)=>{
  //保护条款
  if (!authStore.isAuthenticated) {
    utilsStore.dialogTableVisible = true
    return false;
  }
  const fBtn = e.target.closest(".followingBtn").querySelector(".fBtn")
  fetchUnFollowing(id).then(()=>{
      fBtn.textContent = '关注'
      handleReload(500)
  })
  centerDialogVisible.value = false
}


//更新时发送fetch
watchEffect(()=>{
  if(route.params.id){  
    //获取用户关注列表
    fetchFollowingList(route.params.id as string,()=>true).then((data)=>{ 
      followList.value = data
      setTimeout(() => {
        loading.value = false
      }, 300)
    })
  }
},{flush:'pre'})

</script>

<style scoped lang="scss">
.follow-list{
  @media screen and (min-width:640px) and (max-width:768px){
    .btn{
      padding: 0.5rem;
    }
  }
  @media screen and (max-width:640px){
    font-size: 0.95rem;
    li.flex{
      padding: 0.5rem 0.25rem;
    }
    img.avatar{
      width: 3rem;
      height: 3rem;
    }
    .btn{
      padding: 0.2rem;
    font-size: 0.9em;
    }
    .user-detail{
      font-size: 0.8em;
    }
  }
}
</style>
